<template>
  <view style="padding: 10px 15px;">
    <scroll-view class="scroll-view" scroll-y>
      <Waterfalls ref="fallsRef" @imageClick="wapperClick" :column="2" :value="falls"></Waterfalls>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad, onPullDownRefresh, onShow, onReachBottom } from "@dcloudio/uni-app";
import { ref } from 'vue'
import { toRouter } from '@/hooks/utils'
import Waterfalls from "@/components/custom-waterfalls-flow.vue";
const category = ref(''), falls = ref([]), type = ref('')
const page = ref(1), isPullDownRefresh = ref(false);
const fallsRef = ref(null);
onLoad(function(params) {
  category.value = params.category
  type.value = params.type
  uni.setNavigationBarTitle({
    title: params.name
  })
  initList()
})

const initList = () => {
  let url = ''
  if(category.value) url = `/api/wallpaper/oss/page?page=${page.value}&size=20&category=`+ category.value
  if(type.value) url = `/api/wallpaper/oss/page?page=${page.value}&size=20&type=`+ type.value
  uni.request({
    url: url,
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });
    falls.value = falls.value.concat(res.data.data);
  });
}
const wapperClick = (item) => {
  toRouter("/pages/preview/index", `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}`);
}
onPullDownRefresh(() => {
  page.value = 1;
  uni.showToast({
    title: '刷新中',
    icon: 'none',
    duration: 1500,
    position: 'top'
  });
  isPullDownRefresh.value = true;
  let url = ''
  if(category.value) url = `/api/wallpaper/oss/page?page=${page.value}&size=20&category=`+ category.value
  if(type.value) url = `/api/wallpaper/oss/page?page=${page.value}&size=20&type=`+ type.value
  uni.request({
    url: url,
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });

    falls.value = res.data.data;
    fallsRef.value.refresh()
  });
})
onReachBottom(() => {
  console.log("onReachBottom");
  page.value++;
  isPullDownRefresh.value = false;
  initList();
})
</script>

<style scoped lang="scss">

</style>